<template>
	<z-box>
		<z-title name="柱状图 pictorialBar & bar"></z-title>
		<z-chart :option="option" style="width: 100%; height: 400px; margin-top: 10px;"></z-chart>
	</z-box>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      option: {}
    }
  },
  mounted () {
    const xData = ['市场部', '财务部', '产品部', '研发部', '大数据部'] // ['市场部', '财务部', '产品部', '生产部', '人事部', '化学部', '科学院', '证券部']
    const yData = [12, 23, 22, 11, 14] // , 32, 23, 24, 26, 33]
    this.setOption(xData, yData)
  },
  methods: {
    setOption(xData,yData){
			this.option = {
				backgroundColor: '#0A2E5D',
			  grid: {
			    top: '10%',
			    left: '2%',
			    bottom: '8%',
			    right: '2%',
			    containLabel: true
			  },
			  tooltip:{
			    show: true
			  },
			  animation: true,
			  xAxis: [{
			    type: 'category',
			    data: xData,
			    axisTick: {
			      alignWithLabel: true
			    },
			    nameTextStyle: {
			      color: '#82b0ec',
			      fontSize: 13
			    },
			    axisLine: {
			      show: false,
			      lineStyle: {
			        color: '#82b0ec'
			      }
			    },
			    axisLabel: {
			      textStyle: {
			        color: '#fff'
			      },
			      margin: 30
			    }
			  }],
			  yAxis: [{
			    show: false,
			    type: 'value',
			    axisLabel: {
			      textStyle: {
			        color: '#fff'
			      },
			    },
			    splitLine: {
			      lineStyle: {
			        color: '#0c2c5a'
			      }
			    },
			    axisLine: {
			      show: false
			    }
			  }],
			  series: [
			    {
			      name: '', // 上边圆圈
			      type: 'pictorialBar',
						silent: true,
			      tooltip:{
			        show: false
			      },
						animationDuration: 3000,
						animationEasing: 'cubicInOut',
			      symbolSize: [40, 10],
			      symbolOffset: [0, -6],
			      symbolPosition: 'end',
			      z: 12,
			      label: {
			        normal: {
			          show: true,
			          position: 'top',
			          fontSize: 16,
			          fontWeight: 'bold',
			          color: '#FFFFFF'
			        }
			      },
			      itemStyle: {
			        color: function(params) {
			          var colorList = ['#FFB400', '#1CFFAC', '#00D4FF'];
			          return colorList[params.dataIndex % 3];
			        },
			      },
			      data: yData
			    },
			    {
			      name: '', // 下边圆圈1
			      type: 'pictorialBar',
						silent: true,
			      tooltip:{
			        show: false
			      },
						animationDuration: 3000,
						animationEasing: 'cubicInOut',
						animationDuration: 6000,
						animationEasing: 'cubicInOut',
			      symbolSize: [40, 10],
			      symbolOffset: [0, 7],
			      z: 12,
			      itemStyle: {
			        color: function(params) {
			          var colorList = ['rgba(255, 180, 0, 0.7)', 'rgba(28, 255, 172, 0.7)', 'rgba(32, 166, 252, 0.7)'];
			          return colorList[params.dataIndex % 3];
			        },
			      },
			      data: yData
			    },
			    {
			      name: '', // 下边圆圈2
			      type: 'pictorialBar',
						silent: true,
			      tooltip:{
			        show: false
			      },
						animationDuration: 3000,
						animationEasing: 'cubicInOut',
			      symbolSize: [50, 15],
			      symbolOffset: [0, 12],
			      z: 10,
			      itemStyle: {
			        // borderColor: 'transparent',
			        color: function(params) {
			          var colorList = ['rgba(255, 180, 0, 0.5)', 'rgba(28, 255, 172, 0.5)', 'rgba(32, 166, 252, 0.5)'];
			          return colorList[params.dataIndex % 3];
			        },
			        // borderType: 'solid',
			        // borderWidth: 1
			      },
			      data: yData
			    },
			    {
			      name: '', // 下边圆圈3
			      type: 'pictorialBar',
						silent: true,
			      symbolSize: [70, 20],
			      symbolOffset: [0, 18],
			      z: 10,
			      itemStyle: {
			        // borderColor: 'transparent',
			        color: function(params) {
			          var colorList = ['rgba(255, 180, 0, 0.3)', 'rgba(28, 255, 172, 0.3)', 'rgba(32, 166, 252, 0.3)'];
			          return colorList[params.dataIndex % 3];
			        },
			        // borderType: 'solid',
			        // borderWidth: 2
			      },
			      data: yData
			    },
			    {
			      name: '', // 背景
			      type: 'pictorialBar',
						silent: true,
			      symbolSize: [250, 250],
			      symbolOffset: [0, 60],
			      z: 10,
			      itemStyle: {
			        normal: {
			          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
			            { offset: 0, color: 'rgba(0, 90, 255, 0.4)' },
			            { offset: 0.7, color: 'transparent' }
			          ])
			        }
			      },
			      data: yData
			    },
			    {
			      type: 'bar',
			      barWidth: 40,
			      barGap: '10%',
			      barCateGoryGap: '10%',
						animationDuration: 3000,
						animationEasing: 'cubicInOut',
			      itemStyle: {
			        normal: {
			          color: function(params) {
			            var colorList = [
			              { c1: 'rgba(255, 180, 0, 0.8)', c2: 'rgba(255, 180, 0, 0.3)', c3: 'rgba(255, 180, 0, 0.5)' },
			              { c1: 'rgba(28, 255, 172, 0.8)', c2: 'rgba(28, 255, 172, 0.3)', c3: 'rgba(28, 255, 172, 0.5)' },
			              { c1: 'rgba(32, 166, 252, 0.8)', c2: 'rgba(32, 166, 252, 0.3)', c3: 'rgba(32, 166, 252, 0.5)' }
			            ];
			            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			              { offset: 0, color: colorList[params.dataIndex % 3].c1 },
			              { offset: 0.6, color: colorList[params.dataIndex % 3].c2 },
			              { offset: 1, color: colorList[params.dataIndex % 3].c3 }
			            ]);
			          },
			          opacity: .8
			        },
			      },
			      data: yData
			    }
			  ]
			};
		}
  }
}
</script>

<style>

</style>